<script setup>
import '@/assets/card.css'
import { onMounted, onUnmounted, ref } from 'vue'
import Api from '@/utils/api/Api.js'

// 总在线人数
const onLinePeopleNum = ref(0);
// 群组总数
const groupNum = ref(0);
// 聊天室总数
const chatroomNum = ref(0);


// 保留有效位置
function reservedValidBit(str) {
  let arr = str.split('.');
  if (arr.length <= 1) return str;
  return arr[0] + (arr[0].length < 4 ? ('.' + arr[1].substring(0,4-arr[0].length)) : '');
}

// 自动转换单位
function getNum(num) {
  if (num < 10000) {
    return num + '';
  } else if (num < 100000000) {
    num = num / 10000;
    num = num.toFixed(3);
    return reservedValidBit(num) + '万';
  } else {
    num = num / 100000000;
    num = num.toFixed(3);
    return reservedValidBit(num) + '亿'
  }
}

const update = setInterval(()=>{
  Api.getOnLinePeopleNum().then(res => {
    onLinePeopleNum.value =Number.parseInt(res);
  }).catch(err => {
  });
  Api.getGroupNum().then(res => {
    groupNum.value =Number.parseInt(res);
  }).catch(err => {
  });
  Api.getChatroomNum().then(res => {
    chatroomNum.value =Number.parseInt(res);
  }).catch(err => {
  });
}, 2000);

onMounted(()=>{
});
onUnmounted(()=>{
  clearInterval(update);
});
</script>
<template>
  <div class="card">
    <div class="title">基础信息</div>
    <div class="content">
      <div class="box">
        <div class="box-content">{{getNum(onLinePeopleNum)}}</div>
        <div class="box-name">总在线人数</div>
      </div>
      <div class="box">
        <div class="box-content">{{getNum(groupNum)}}</div>
        <div class="box-name">总群组数</div>
      </div>
      <div class="box">
        <div class="box-content">{{getNum(chatroomNum)}}</div>
        <div class="box-name">在线聊天室</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.box {
  float:left;
  width: 100px;
}

.box .box-content {
  text-align: center;
  font-size: 25px;
  line-height: 60px;
  color: rgba(220,100,100,1);
}

.box .box-name {
  text-align: center;
}
</style>